import React from 'react'
import Image from 'next/image'
import Link from 'next/link'

export default function BlogCard({ article }) {
  return (
    <div className='bg-white rounded-xs overflow-hidden h-full'>
      <div className="card">
        <Link href={article.slug ? `/articles/${article.slug}` : `/#`}>
          {article?.cover ? <Image src={article?.cover} alt={article?.title} className='w-full h-48 object-cover' width={720} height={720} priority={true} /> : <Image src="/news.jpg" alt={article?.title} className='w-full h-48 object-cover' width={720} height={480} priority={true} />}
          <div className='px-4 pt-2 pb-4 flex flex-col gap-1'>
            <h3 className='text-sm md:text-md font-semibold'>{article?.title}</h3>
            <p className='text-xs md:text-sm text-gray-500 line-clamp-2 overflow-hidden text-ellipsis'>{article?.description}</p>
          </div>
        </Link>
      </div>
    </div>
  )
}
